<template>
  <div class="home-swiper">
    <swiper
      ref="mySwiper"
      :options="swiperOptions"
      v-if="banner_list.length !== 0"
    >
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in banner_list"
        :key="'slide' + index"
      >
        <a :href="item.link">
          <img v-lazy="item.image" alt="" @load="imgLoad" />
        </a>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// 轮播图
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  props: {
    banner_list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        loop: true,
        // autoplay: {
        //   delay: 1500,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
      },
      lockEmit: false,
    }
  },
  methods: {
    imgLoad() {
      if (!this.lockEmit) {
        this.$emit('img-load-finished')
        this.lockEmit = true
      }
    },
  },
}
</script>

<style lang="less" scoped>
.home-swiper {
  .swiper-slide {
    width: 100%;
    height: 52vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
